<template>
  <div>
    <Header
      :isGoBack="false"
      :class="isHeaderFixed ? 'fixed-header-shadow' : 'fixed-header'"
    >
      <template v-slot:left>
        <div>
          {{ checkedBookData.edition_name }}- {{ checkedBookData.grade_name }}>
          打印试卷
          <!-- {{ $store.getters.categoryList[category].title }}(普通模式) -->
        </div>
      </template>
      <template v-slot:right>
        <div class="test-btn">
          <span class="btn-bg ml20">
            <el-button class="button button-bg-second" @click="printTest"
              >打印</el-button
            >
          </span>
          <span class="btn-bg ml20">
            <el-button
              class="button button-border-second"
              @click="goStudyCenter"
            >
              返回学习中心
            </el-button>
          </span>
        </div>
      </template>
    </Header>
    <div class="w1200 general-test-box print-test-box">
      <div class="print-test-box-radio">
        <el-radio-group v-model="isShowAnswer">
          <el-radio :label="0">隐藏答案</el-radio>
          <el-radio :label="1">显示答案</el-radio>
        </el-radio-group>
      </div>
      <div id="printTest" ref="printTest" class="general-test print-test">
        <h3 class="test-title">
          <span
            v-if="checkedBookData.edition_name && checkedBookData.grade_name"
          >
            智慧1+1{{ checkedBookData.edition_name }}-
            {{ checkedBookData.grade_name }}</span
          >
          <span>单词测试卷</span>
        </h3>
        <p class="test-name">学生姓名：<span class="line"></span></p>
        <div v-if="checkedBookData.book_id != 600">
          <div
            class="question-type-container"
            v-for="(quetionType, index) in questionList"
            :key="quetionType.question_type"
          >
            <div class="type-title">
              <span>{{ index + 1 }}.</span>
              {{ typeObj[quetionType.question_type] }}
              <span>(共{{ quetionType.question_info_list.length }}题)</span>
            </div>
            <ul class="question-list">
              <table border="1" class="question-list-table">
                <tr
                  v-for="(question, qIndex) in quetionType.question_info_list"
                  :key="qIndex"
                >
                  <td class="question-index">
                    <span class="mr5">{{ qIndex + 1 }}</span>
                    <span v-if="question.answer_list">
                      [
                      <span v-if="!isShowAnswer" class="pl20"></span>
                      <span v-if="isShowAnswer && question.trueAnswer">
                        <span
                          v-for="(item, index) in question.trueAnswer"
                          :key="index"
                        >
                          {{ String.fromCharCode(item.answerIndex + 65) }}</span
                        >
                      </span>
                      ]
                    </span>
                    <span v-else>
                      <span v-if="!isShowAnswer" class="line-answer line"></span>
                      <span v-if="isShowAnswer" class="line-answer">{{
                        question.word_name
                      }}</span>
                    </span>
                  </td>
                  <td>
                    <div class="question-title">
                      <!-- 英译汉-->
                      <span v-if="quetionType.question_type == 1">
                        <span>{{ question.word_name }}</span>
                      </span>
                      <!-- 汉译英 -->
                      <span
                        v-if="
                          quetionType.question_type == 2 ||
                            quetionType.question_type == 5
                        "
                      >
                        <span>
                          <p
                            v-for="(paraphrase,
                            index) in question.paraphrase.split('\n')"
                            :key="index"
                          >
                            {{ paraphrase }}
                          </p>
                        </span>
                      </span>
                    </div>
                  </td>
                  <td
                    v-for="(answer, answerIndex) in question.answer_list"
                    :key="answerIndex"
                  >
                    <div class="answer-label">
                      <span class="check-item-label mr5">
                        [{{ String.fromCharCode(answerIndex + 65) }}]
                      </span>
                      <span v-if="answer.word_name">
                        {{ answer.word_name }}
                      </span>
                      <span v-else>
                        <p
                          v-for="(paraphrase, index) in answer.paraphrase.split(
                            '\n'
                          )"
                          :key="index"
                        >
                          {{ paraphrase }}
                        </p>
                      </span>
                    </div>
                  </td>
                </tr>
              </table>
            </ul>
          </div>
        </div>
        <div v-else>
          <div class="question-type-container">
            <div class="type-title">
              选出单词最恰当的中文意思，并将序号填在前面的括号内
              <span>(共{{ questionList.length }}题)</span>
            </div>
            <ul class="question-list">
              <table border="1" class="question-list-table">
                <tr v-for="(question, qIndex) in questionList" :key="qIndex">
                  <td class="question-index">
                    <span class="mr5">{{ qIndex + 1 }}</span>
                    <span>
                      [
                      <span class="pl20" v-if="!isShowAnswer"></span>
                      <span v-if="isShowAnswer">{{ question.answer }}</span>
                      ]
                    </span>
                  </td>
                  <td>
                    <div class="question-title">
                      <span>
                        <span class="text-word text-blod">{{
                          question.word_name
                        }}</span>
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="answer-label">
                      <span class="check-item-label mr5"> [A] </span>
                      <span>{{ question.answer_a }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="answer-label">
                      <span class="check-item-label mr5"> [B] </span>
                      <span>{{ question.answer_b }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="answer-label">
                      <span class="check-item-label mr5"> [C] </span>
                      <span>{{ question.answer_c }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="answer-label">
                      <span class="check-item-label mr5"> [D] </span>
                      <span>{{ question.answer_d }}</span>
                    </div>
                  </td>
                </tr>
              </table>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
// import TestQuestion from "@/components/TestQuestion";
import { getHomeData, getPrintTest } from "@/api/index";
import PrintJS from "print-js";
import EventBus from "@/assets/js/eventBus";
export default {
  data() {
    return {
      paperData: {},
      questionList: [],
      chunkQuestionList: [],
      typeObj: {
        0: "记忆",
        1: "英译汉",
        2: "汉译英",
        3: "听力理解",
        4: "听写",
        5: "默写",
      },
      nowIndex: 0,
      allNum: 0,
      testTime: 0,
      timer: null,
      checkedBookData: null,
      unitId: null,
      category: null,
      source: null,
      testLoading: false,
      isHeaderFixed: false,
      submitReminder: true,
      isOpenMessageBox: false,
      isPrint: true,
      homePageData: {},
      printLoading: false,
      isShowAnswer: 0,
    };
  },
  computed: {
    questionType() {
      let nowType = "";
      let nextType = "";
      this.questionList.forEach((questionType) => {
        questionType.question_info_list.forEach((question) => {
          if (question.allIndex == this.nowIndex) {
            nowType = question.question_type;
          }
          if (question.allIndex == this.nowIndex + 1) {
            nextType = question.question_type;
          }
        });
      });
      return {
        nowType,
        nextType,
      };
    },
  },
  components: {
    Header,
    // TestQuestion,
  },
  methods: {
    getHomeData() {
      getHomeData().then((res) => {
        if (res.code == 200 && res.data) {
          this.homePageData = res.data;
        }
      });
    },
    printTest() {
      // PrintJS({
      //   printable: "printTest",
      //   type: "html",

      //   // documentTitle: "测验",
      //   // scanStyles: false,
      //   // 继承原来的所有样式
      //   targetStyle: "*",
      //   targetStyles: "*",
      //   scanStyles: true,
      //   maxWidth: 99999,
      //   // css: "/assets/css/print.css",
      // });
      this.$print(this.$refs.printTest);
      // window.print();
    },
    goStudyCenter() {
      this.$router.push({
        name: "studyCenter",
      });
    },
    getTestPaper() {
      let data = {
        book_id: this.checkedBookData.book_id,
        unit_id_list: this.unitId, //2229 2230
      };
      if (this.category == 24) {
        data.question_type_list = this.$route.query.questionType
          ? String(this.$route.query.questionType)
              .split(",")
              .map(Number)
          : [1, 2, 5];
      }
      if (data.unit_id_list) {
        data.unit_id_list.sort((a, b) => {
          return a - b;
        });
      }
      data.question_type_list.sort((a, b) => {
        return a - b;
      });
      // this.printLoading = true;
      EventBus.$emit("openLoading", {});
      getPrintTest(data)
        .then((res) => {
          // this.printLoading = false;
          EventBus.$emit("closeLoading", {});
          if (res.code == 200) {
            if (this.checkedBookData.book_id == 600) {
              this.paperData = res.data;
              this.questionList = res.data.print_question_list;
            } else {
              this.paperData = res.data;
              this.questionList = res.data.question_info_type_list;
              let allIndex = -1;
              this.questionList.forEach((questionType) => {
                questionType.question_info_list.forEach((question) => {
                  question.studentAnswer = "";
                  allIndex++;
                  question.allIndex = allIndex;
                  question.phonetic =
                    this.$store.getters.isBritish == 1
                      ? question.phonetic_british
                      : question.phonetic_american; //音标
                  question.audioURL =
                    this.$store.getters.isBritish == 1
                      ? question.en_url
                      : question.us_url; //音频
                  question.trueAnswer =
                    question.answer_list &&
                    question.answer_list.filter((item, index) => {
                      item.answerIndex = index;
                      return item.is_true == 1;
                    });
                });
              });
              this.allNum = allIndex;
            }
          }
        })
        .catch(() => {
          // this.printLoading = false;
          EventBus.$emit("closeLoading", {});
        });
    },
    scrollBehavior() {
      let dom = document.getElementById("app");
      const top = dom.pageYOffset || dom.scrollTop || dom.scrollTop;
      if (top > 0) {
        this.isHeaderFixed = true;
      } else {
        this.isHeaderFixed = false;
      }
    },
  },
  filters: {
    filterTime(val) {
      let hours = parseInt(val / 3600);
      if (hours < 10) {
        hours = "0" + hours;
      }
      let minutes = parseInt((val % 3600) / 60);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = parseInt(val % 60);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return hours + ":" + minutes + ":" + seconds;
    },
  },
  mounted() {
    document
      .getElementById("app")
      .addEventListener("scroll", this.scrollBehavior);
  },
  beforeDestroy() {
    document
      .getElementById("app")
      .removeEventListener("scroll", this.scrollBehavior);
    clearInterval(this.timer);
    if (this.isOpenMessageBox) {
      this.$msgbox.close();
    }
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.category = Number(this.$route.query.category);
    this.source = this.$store.getters.categoryList.filter((item) => {
      return item.category == this.category;
    })[0].source;
    this.unitId = this.$route.query.unitId
      ? String(this.$route.query.unitId)
          .split(",")
          .map(Number)
      : null;
    this.getTestPaper();
    // this.getHomeData();
  },
  watch: {},
};
</script>
<style>

tr {
  page-break-inside: avoid;
}
</style>
